radio单选按钮样式自定义 |
您所在的位置：网站首页 › layui 单选按钮模拟点击 › radio单选按钮样式自定义 |
radio单选按钮样式自定义
|
radio单选按钮默认样式改变,radio默认样式确实有点丑,而且不能适合所有的UI设计稿,现在UI稿的花样是越来越多了,所有使用css自定义radio单选按钮样式还是很重要的. 单选按钮最常见的地方就是性别的选择,这里以此为例,html代码如下: 性别： 男 女 保密 css改变radio按钮样式,这里使用了伪类(在css中一定要擅用伪类,能更好的实现功能): .formSex input{ display: none; margin-top: 10px; } .formSex label{ box-sizing: border-box; position: relative; margin-right: 34px; margin-top: 10px; } .formSex label::before{ display: inline-block; content: ""; width: 16px; height: 16px; border-radius: 50%; border: 1px solid rgb(219, 219, 219); margin-right: 6px; vertical-align: bottom; } .formSex input:checked+label::before{ border: 1px solid #fff; background-color: #fff; } .formSex input:checked+label::after{ display: inline-block; content: ""; width: 18px; height: 18px; border-radius: 50%; position: absolute; left: 0; bottom: 0; background-color: #F60; }在不使用js的情况下就改变了radio的按钮样式了,既然是自定义样式,就可以随心情自己修改了,我这里实现的效果是这样的
|
【本文地址】
今日新闻 |
推荐新闻 |